<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML计算器</title>
</head>
<body>
    <table>
        <tr> <input type="text" readonly id="JiSuanQi"></tr>
        <tr>
            <td><input type="button" value="7" onclick="handleNumberInput(this.value)"></td>
            <td><input type="button" value="8" onclick="handleNumberInput(this.value)"></td>
            <td><input type="button" value="9" onclick="handleNumberInput(this.value)"></td>
            <td><input type="button" value="+" onclick="handleOperateUnput(this.value)"></td>
        </tr>
        <tr>
            <td><input type="button" value="4" onclick="handleNumberInput(this.value)"></td>
            <td><input type="button" value="5" onclick="handleNumberInput(this.value)"></td>
            <td><input type="button" value="6" onclick="handleNumberInput(this.value)"></td>
            <td><input type="button" value="-" ></td>

        </tr>
        <tr>
            <td><input type="button" value="1" onclick="handleNumberInput(this.value)"></td>
            <td><input type="button" value="2" onclick="handleNumberInput(this.value)"></td>
            <td><input type="button" value="3" onclick="handleNumberInput(this.value)"></td>
            <td><input type="button" value="*" onclick="handleOperateUnput(this.value)"></td>

        </tr>
        <tr>
            <td><input type="button" value="0" onclick="handleNumberInput(this.value)"></td>
            <td><input type="button" value="=" onclick="handleEqualInput(this.value)"></td>
            <td><input type="button" value="/" onclick="handleOperateUnput(this.value)"></td>
            <td><input type="button" value="CE" onclick="handleCEInput()"></td>
        </tr>
    </table>
</body>
</html>

<script>
    // 1.定义数字按钮的处理方法
    function handleNumberInput(x)
    {
        // 将当前输入的数字，加到顶部输入框的末尾
        var obj=document.getElementById("JiSuanQi");
        var num1="";
        var num2="";
        var operate="";
        var flag=false;
        obj.value+=x;
        if(!flag)
             num1+=x;  //按下操作符之前的数字，放入就num1中
        else num2+=x;
    }
    
    function handleOperateUnput(ch)
    {
        var obj=document.getElementById("JiSuanQi");
        obj.value+=ch;
        //记录输入的符号
        operate=ch;
        // 记录本次输入的操作符
        flag=true;
        //设置操作符标识为true
    }

    // 定义处理=按键的方法
    function handleEqualInput(){
        var obj=document.getElementById("JiSuanQi");
        obj.value+="=";
        // 将num1 num2中的内容 按照oprate表示的操作进行运算
        var result;
        if(operate=="+")
            result=parseInt(num1)+parseInt(num2);
        else if(operate=="-")
            result=parseInt(num1)-parseInt(num2);
        else if(operate=="*")
            result=parseInt(num1)*parseInt(num2);
        else if(operate=="/")
            result=parseInt(num1)/parseInt(num2);

            // 显示结果
        obj.value+=result;  
        
    }
    

    function handleCEInput(){
        decument.getElementById("JiSuanQi").value="";
        num1="";
        num2="";
        operate="";
        flag=false;
    }
    </script>